import {App, nextTick} from 'vue'

export default function useDragWindowDirective(app: App): void {
    app.directive('drag-window', async (el) => {
        await nextTick()

        const modal = el
        const header = el.getElementsByClassName('drag-title')[0]
        let left = 0
        let top = 0
        header.style.cursor = 'move'
        top = top || modal.offsetTop

        header.onpointerdown = (e: { clientX: number; clientY: number; pointerId: number }) => {
            const startX = e.clientX
            const startY = e.clientY
            header.left = header.offsetLeft
            header.top = header.offsetTop
            header.setPointerCapture(e.pointerId)

            el.onpointermove = (event: { clientX: number; clientY: number }) => {
                const endX = event.clientX
                const endY = event.clientY
                modal.left = header.left + (endX - startX) + left
                modal.top = header.top + (endY - startY) + top
                modal.style.left = modal.left + 'px'
                modal.style.top = modal.top + 'px'
            }
            el.onpointerup = () => {
                left = modal.left || 0
                top = modal.top || 0
                el.onpointermove = null
                el.onpointerup = null
                header.releasePointerCapture(e.pointerId)
            }
        }
    })
}
